<template>
  <div>
    <TitleSecondary title="合同" :icon="icon" @change="handleChangeIcon" />
    <div v-show="icon === 'up'" class="log-container">
      <p-table
        class="table-list-container"
        row-key="id"
        :scroll="{ x: '100%' }"
        :columns="columns"
        bordered
        :pagination="false"
        :data-source="dataSource"
        v-bind="$attrs"
        v-on="$listeners"
      >
        <a
          slot="contract.contractNo1"
          slot-scope="text, record"
          @click="handleNumberClick(record)"
        >
          {{ text }}
        </a>
      </p-table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      icon: 'down',
    };
  },
  computed: {
    typeOptions() {
      return this.$store.state.dictionary.dict['agreement_type'] || {};
    },
    stateOptions() {
      return this.$store.state.dictionary.dict['agreement_status'] || {};
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '合同编号',
          width: 150,
          ellipsis: true,
          dataIndex: 'contract.contractNo',
          scopedSlots: { customRender: 'contract.contractNo' },
        },
        {
          align: 'center',
          title: '合同名称',
          width: 150,
          ellipsis: true,
          dataIndex: 'contract.contractName',
        },
        {
          align: 'center',
          title: '合同类型',
          width: 100,
          ellipsis: true,
          dataIndex: 'contract.contractType',
          customRender: text => this.typeOptions[text],
        },
        {
          align: 'center',
          title: '合同状态',
          width: 100,
          ellipsis: true,
          dataIndex: 'contract.contractStatus',
          customRender: text => this.stateOptions[text],
        },
        {
          align: 'center',
          title: '客户合同号',
          width: 150,
          ellipsis: true,
          dataIndex: 'contract.salesContractNo',
        },
        {
          align: 'center',
          title: '创建人',
          width: 100,
          ellipsis: true,
          dataIndex: 'contract.createUserName',
        },
        {
          align: 'center',
          title: '创建时间',
          width: 150,
          ellipsis: true,
          dataIndex: 'contract.createTime',
        },
      ];
      return columns;
    },
  },
  created() {},
  methods: {
    handleChangeIcon(icon) {
      this.icon = icon === 'down' ? 'up' : 'down';
    },
    // 编号点击
    handleNumberClick(record) {
      this.$message.warning('该功能未实现');
      // this.$router.push({
      //   path: '/product-info',
      //   query: {
      //     id: record.product.id,
      //   },
      // });
    },
  },
};
</script>

<style lang="less" scoped>
.table-list-container {
  margin-top: 20px;
  margin-bottom: 40px;
}
</style>
